<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-游戏拼图</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #title {
        position: absolute;
        width: 330px;
        height: 86px;
        left: 50%;
        margin-left: -165px;
        top: 30px;
      }
      #left {
        position: absolute;
        width: 202px;
        height: 521px;
        top: 130px;
        left: 120px;
        background: url(./images/game/game1/game1-left-bg.png);
      }
      #right {
        position: absolute;
        width: 782px;
        height: 521px;
        top: 130px;
        left: 400px;
        background: url(./images/game/game1/game1-main-bg.png);
      }
      #right-container {
        position: absolute;
        left: 60px;
        top: 40px;
      }
      .picture {
        position: absolute;
      }
      .picture div {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      #left-view{
        position: absolute;
        left: 18px;
        top: 25px;
        width: 160px;
        height: 500px;
      }
      #time{
        position: absolute;
        width: 220px;
        top: 40px;
        left: 520px;
      }
      .time-bg {
        width: 140px;
        height: 75px;
        margin-bottom: 20px;
        background: url(./images/game/game1/time-bg.png);
        color: #fff;
        line-height: 75px;
        font-size: 26px;
        padding-left: 77px;
      }
      #bg{
        width: 100%;
      }
      #play-pause {
        margin: 0 auto;
        width: 114px;
        height: 114px;
        background: url(./images/game/game1/play-stauts.png) left bottom;
      }
      #play-pause.focus{
        background-position: left top;
        border: 0 none!important;
        transform: scale(1);
      }
      .time-title{
        margin: 3px auto;
        height: 39px;
      }
      #right .mark {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url(./images/game/game1/make.png) repeat;
        z-index: 10;
      }
      #left .active .mark{
        width: 148px;
        height: 148px;
        border: 4px solid #fff;
        top: -8px;
        left: -8px;
        display: block;
        z-index: 1000;
      }
      
      #left .mark {
        display: none;
      }
      #over,
      #init,
      #stop,
      #pass{
        position: absolute;
        left: 0;
        top: 0;
        width: 1280px;
        height: 720px;
      }
      #over {
        background: url(./images/game/game1/gameover.png);
      }
      #init {
        background: url(./images/game/game1/rule.png);
      }
      #stop {
        background: url(./images/game/game1/gamepause.png);
      }
      #pass {
        background: url(./images/game/game1/pass.png);
      }
      .btn{
        position: absolute;
        width: 210px;
        height: 75px;
        background: url(./images/game/game1/btn-group.png);
      }
      .btn-0{
        background-position: 0 0;
      }
      .btn-1{
        background-position: 0 -75px;
      }
      .btn-2{
        background-position: 0 -150px;
      }
      .btn-3{
        background-position: 0 -225px;
      }
      .btn.focus{
        border: 0 none!important;
        transform: scale(1);
        margin-left: 0!important;
        margin-top: 0!important;
      }
      .btn-0.focus {
        background-position: -210px 0;
      }
      .btn-1.focus {
        background-position: -210px -75px;
      }
      .btn-2.focus {
        background-position: -210px -150px;
      }
      .btn-3.focus {
        background-position: -210px -225px;
      }

      .btn-group{
        position: absolute;
        left: 415px;
      }
      #over .btn-group,
      #stop .btn-group,
      #pass .btn-group{
        top: 390px;
      }
      #init .btn-group{
        top: 470px;
      }
      #dialog-1{
        left: 240px;
      }

      .picture.focus{
        border-color: #17defd !important;
        transform: scale(1);
        -webkit-transform:scale(1);
      }

      #dialog {
        position: absolute;
        left: 0;
        top: 0;
        width: 1280px;
        height: 720px;
        z-index: 1000;
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="title"></div>
      <div id="left">
        <div id="left-view">
          <div id="left-container" style="position: relative;"></div>
        </div>
      </div>
      <div id="right">
        <div id="right-container"></div>
        <div id="time">
          <img class="time-title" src="./images/game/game1/countdown.png" alt="" style="width: 111px;">
          <div class="time-bg" id="countdown"></div>
          <img class="time-title" src="./images/game/game1/current.png" alt="" style="width: 147px;">
          <div class="time-bg" id="current"></div>
          <img class="time-title" src="./images/game/game1/play-title.png" alt="" style="width: 148px;">
          <div id="play-pause" class="item"></div>
        </div>
      </div>
      <div id="dialog"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/game/game1.js"></script>
    <script>
      // var shakeRate = 
      /** 
       * ok 键操作
      */
      var hanlderEnter = {
        timer: null,
        shakeRate: [],
        play: function (index, id) {
          game1.showDialog('stop')
        },
        left: function () {},
        right: function (index, id) {
          if (!this.shakeRate.length) {
            for(var i = 10; i > 0; i -= 1){
              this.shakeRate.push(i,-i)
            }
            this.shakeRate.push(0)
          }
          var dom = $('.active .left-picture')
          if (!dom.length) return
          var _index = dom.attr('id').match(/\d+/)[0]
          if (_index == index) {
            dom.remove()
            $('#' + id).append(dom)
            game1.navList.splice(0, 1)
          } else {
            var i = 0
            var left = dom.position().left
            var self = this
            clearInterval(this.timer)
            this.timer = setInterval(function(){
              dom.css('margin-left', self.shakeRate[i])
              i++
              if(i >= self.shakeRate.length){
                clearInterval(self.timer)
              }
            },50)
          }
          $('.focus').removeClass('focus')
          if (game1.navList.length === 0) {
            if (game1.sortList.length === 0) {
              game1.showDialog('pass')
            } else {
              game1.renderLeft()
            }
          } else {
            $('.active').addClass('focus')
          }
        },
        dialog: function (index) {
          if (index == 0) {
            page.goback()
          } else {
            if (game1.dialogType === 'over') {
              game1.render()
              game1.start()
            } else if (game1.dialogType === 'pass') {
              game1.render()
              game1.start()
            } else {
              game1.start()
            }
            game1.hideDialog()
          }
        }
      }

      function scrollTop () {
        var len = game1.cols * game1.rows
        var view = 3
        if (len < view) return
        var info = utils.getCurInfo()
        var index = info.index
        var w = 150
        var middle = Math.floor(view / 2)
        var container = $('#left-container')
        if (index < middle) {
          container.css('top', 0)
        } else if ( len - index <= middle ) {
          container.css('top', -(len - view) * w)
        } else {
          container.css('top', -(index - middle) * w)
        }
      }

      function getPreFocus() {
        var seriesId = utils.getUrlParam("seriesId", "")
        game1.init(seriesId)
      }

      function init () {
        page.init({
          isRenderBg: false
        })
        getPreFocus()
        game1.showDialog('init')
        log.commit({
          name: '拼图游戏页面',
          type1: 'browse',
          type2: 'game-1',
          starttime: new Date().getTime(),
        })
      }

      function keyUp () {
        if (game1.dialogType) return
        var info = utils.getCurInfo()
        switch (info.type) {
          case 'left':
            if (parseInt(info.index) != 0) {
              var dom = move.up()
              dom && utils.toggleClass(dom, 'focus active')
            }
            break;
          case 'right':
            if (parseInt(info.index) >= game1.cols) {
              var dom = move.up()
              dom && utils.toggleClass(dom)
            }
            break;
        }
      }

      function keyDown () {
        if (game1.dialogType) return
        var info = utils.getCurInfo()
        switch (info.type) {
          case 'left':
            var maxLen = game1.cols * game1.rows
            if (parseInt(info.index) < maxLen - 1) {
              var dom = move.down()
              dom && utils.toggleClass(dom, 'focus active')
            }
            break;
          case 'right':
            var maxLen  = (game1.rows - 1) * game1.cols
            if (parseInt(info.index) < maxLen) {
              var dom = move.down()
              dom && utils.toggleClass(dom)
            }
            break;
        }
      }

      function keyLeft () {
        var info = utils.getCurInfo()
        if (game1.dialogType) {
          var index = $('.btn-group .focus').index()
          if (index == 1) {
            index--
            $('.btn-group .item').removeClass('focus').eq(index).addClass('focus')
          }
        } else {
          switch (info.type) {
            case 'right':
              var dom
              if (info.index % game1.cols == 0) {
                dom = $('.active')[0]
              } else {
                dom = move.left() 
              }
              dom && utils.toggleClass(dom)
              break;
            case 'play':
              var dom = document.getElementById('right-' + ((game1.cols * game1.rows) - 1))
              dom && utils.toggleClass(dom)
              break;
          }
        }
      }

      function keyRight () {
        var info = utils.getCurInfo()
        if (game1.dialogType) {
          var index = $('.btn-group .focus').index()
          if (index == 0) {
            index++
            $('.btn-group .item').removeClass('focus').eq(index).addClass('focus')
          }
        } else {
          switch (info.type) {
            case 'left':
              var dom = move.right()
              dom && utils.toggleClass(dom)
              break;
            case 'right':
              var dom = move.right() || document.getElementById('play-pause')
              dom && utils.toggleClass(dom)
              break;
          }
        }
      }

      function keyEnter () {
        if (game1.dialogType) {
          var index = $('.btn-group .focus').index()
          hanlderEnter.dialog(index)
        } else {
          var info = utils.getCurInfo()
          hanlderEnter[info.type](info.index, info.id)
        }
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          page.goback()
        }
      }
    </script>
  </body>
</html>
